<template>
  <div class="left_menu">
    <div class="menu_list">
      <div
        class="menu_item"
        :class="currentIndex == index ? 'active' : ''"
        @click="tabChange(item, index)"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <cu-icon class="menu_icon" :type="item.icon" />
        <div class="menu_text">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import store from "@/store";
export default defineComponent({
  setup(props, context) {
    const state = reactive({
      currentIndex: 0,
      menuList: [
        {
          id: 1,
          name: "项目素材",
          icon: "icon-shangjiasucai",
          type: "merchantMaterials",
        },
        {
          id: 2,
          name: "通用素材",
          icon: "icon-tongyongsucai",
          type: "generalMaterials",
        },
        {
          id: 3,
          name: "热门素材",
          icon: "icon-remensucai",
          type: "popularMaterials",
        },
        {
          id: 4,
          name: "热门音乐",
          icon: "icon-remenyinle",
          type: "popularMusic",
        },
      ],
    });
	
	let edit_model = store.getters.clipJSON.edit_model
    if (edit_model == 5) {
      state.menuList = state.menuList.filter((item) => item.name != "热门素材" && item.name != "热门音乐");
    }

    context.emit("currentTab", state.menuList[0]);

    const tabChange = (item, index) => {
      if (state.currentIndex == index) return;
      state.currentIndex = index;
      context.emit("currentTab", item);
    };

    return {
      tabChange,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.left_menu {
  width: 100%;
  background-color: #131313;
  .menu_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .menu_item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #fff;
      cursor: pointer;
      height: 88px;
      &.active {
        color: #2878FF;
      }
      &:hover {
        color: #2878FF;
      }
      .menu_icon {
        font-size: 26px;
      }
      .menu_text {
        font-size: 12px;
        margin-top: 3px;
      }
    }
  }
}
</style>
